<template>
	<view class="playMusic">
		<view class="playMusicContent">
			<view class="playMusicContentLeft">
				<up-avatar :src="src"></up-avatar>
				<view class="musicName">歌曲名</view>
				&nbsp; - &nbsp;
				<view class="role">演唱者</view>
			</view>
			<view class="play">
				<text class="iconfont icon-24gl-previous icons"></text>
				<text class="iconfont icon-24gl-play iconsPlay" v-if="isAudio==false" @click="playAudio"></text>
				<text class="iconfont icon-zanting iconsPlay" v-else @click="onPauseAudio"></text>
				<text class="iconfont icon-24gl-next icons"></text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				isAudio: false,
				innerAudioContext: uni.createInnerAudioContext(),
				audioForm: {
					times: 0, //总时长
					currentTime: 0, //已播放时长
					duration: 0, //剩余时长
				}
			}
		},

		methods: {
			playAudio() {
				this.innerAudioContext.src =
					'https:////freetyst.nf.migu.cn/public/product9th/product44/2021/08/0217/2020年10月26日16点15分紧急内容准入唐羽文化1首/歌曲下载/MP3_40_16_Stero/60078705117175517.mp3?Key=cf9b9cc81f537048&Tim=1701235833128&channelid=00&msisdn=c12fe4d92538455bab2a6f977ef975fe&CI=600787051172600919000001832085&F=000009';
				this.innerAudioContext.onPlay(() => {
					console.log("已经播放了")
					this.isAudio = true
				});
				//获取播放时长 和剩余时长 和当前歌曲总时长
				this.innerAudioContext.onTimeUpdate(() => {
					this.audioForm.times = this.innerAudioContext.duration.toFixed(0);
					this.audioForm.currentTime = this.innerAudioContext.currentTime.toFixed(0);
					this.audioForm.duration = this.audioForm.times - this.audioForm.currentTime;
				})

				this.innerAudioContext.onError((res) => {
					console.log(res, "异常");
					console.log(res, "异常");
				});

				this.innerAudioContext.onEnded((res) => {
					// 把所有状态变为初始状态
					this.audioForm.currentTime = 0
					this.audioForm.times = 0
					this.audioForm.duration = 0
					this.isAudio = false
					console.log(res, "音乐结束");
					console.log(res);
				});
				// 在设置音频源后再进行跳转操作
				this.innerAudioContext.seek(this.audioForm.currentTime);
				this.innerAudioContext.play();
			},
			onPauseAudio() {
				this.innerAudioContext.pause()
				this.isAudio = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.playMusic {
		width: 750rpx;
		height: 120rpx;
		position: fixed;
		left: 0;

		bottom: 60px;
		// #ifdef APP-PLUS
		bottom: 0rpx !important;
		//#endif
		background-color: $app-bgc-color;
		z-index: 2;
		border-bottom: 1px solid $app-text-color-20;
		border-top: 1px solid $app-text-color-20;

		.playMusicContent {
			width: 90%;
			height: 120rpx;
			margin: 0 auto;
			justify-content: space-between;
			display: flex;
			align-items: center;

			.playMusicContentLeft {
				height: 100%;
				color: $app-text-color-40;
				font-size: 24rpx;
				font-weight: 400;
				display: flex;
				align-items: center;

				.musicName {
					margin-left: 30rpx;
				}
			}

			.icons {
				font-size: 40rpx;
				padding-right: 30rpx;
				color: #fff;

				&:active {
					opacity: 0.8;
				}
			}

			.iconsPlay {
				font-size: 40rpx;
				padding-right: 30rpx;
				color: #fff;

				&:active {
					opacity: 0.8;
				}
			}
		}

		.play {
			width: 200rpx;
			height: 50rpx;
			color: #fff;
		}
	}
</style>